import React from 'react';
import { connect } from 'dva';
import { Card } from 'antd';
import styles from './index.less';
import TreeMenu from './Tree.js';
import Content from './Content';

function Menu(props) {
  return (
    <div className={styles.scroll_main}>
      <div className={styles.scroll_left}>
        <Card
          className="cute"
          title="规则配置"
          style={{ height: props.size.height }}
          extra={<span className="text-danger">右击显示操作项</span>}
        >
          <TreeMenu height={props.size.height} />
        </Card>
      </div>
      <div className={styles.scroll_content}>
        <Card title="配置区" style={{ height: props.size.height }}>
          <Content height={props.size.height} />
        </Card>
      </div>
    </div>
  );
}

export default connect(({ setting }) => ({
  size: setting.size,
}))(Menu);
